    <div id="app" class="right_col" role="main">
        <p>=============数据单向绑定=======</p>
        <h3 style="color:#008c8c;">{{company}}</h3>
        <span style="color: red;">{{errorMassage}}</span>
        <form action="">
            <p>内容为:{{user.name}}</p>
            <input type="text" :value="user.name">
        </form>
        <p>==================数据双向绑定================</p>
        <form>
            <input type="text" v-model.trim="user.name">
            <input type="text" v-model.trim="errorMassage"><br>
            <input type="text" v-model="user.age">
            <br>
            <input type="radio" value="男" v-model="user.gender">男
            <input type="radio" value="女" v-model="user.gender">女<br/>

            <input type="checkbox" value="1" v-model="user.roles">admin
            <input type="checkbox" value="2" v-model="user.roles">manager
            <input type="checkbox" value="3" v-model="user.roles">staff <br>

            <select name="" id="" v-model="user.city">
                    <option value="重庆">重庆</option>
                    <option value="成都">成都</option>
                    <option value="上海">上海</option>
            </select>
        </form>
       <p>=======================条件渲染==========================</p>
<!--
v-show 和 v-if用法类似，他们的区别是v-show是改变标签的display属性，改为none将之隐藏起来，适用于频繁显示或隐藏的
情况下，而v-if是直接操作DOM树，将之删除，在页面中看不到标签的存在，频繁操作DOM树对性能消耗比较大!    
--> 
        <span v-show="user.name == '唐琳'" style="color: red;">是傻逼</span>
        <span v-show="user.name == '石卓阳'" style="color: red;">是帅哥</span>
    <p>=======================循环===================================</p>
            <span v-for="item in roles">
                {{item}}
            </span>   
            <br>
            <span v-for="item in roles">
                <input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles">{{item.name}}----{{item.id}}
            </span>   
    
            <br>
            <ul>
                <li v-for="item in cities" id="item.id">{{item.name}}</li>
            </ul>
            <p>==================事件绑定=========================</p>
            <p>
                <button @click="test1()">test1</button>
            </p>
            <p> <button @click="test2()">test2</button></p>

            <p>==================计算器=========================</p>
            <p>计算结果为:{{capitalize}}</p>
</div>

    <script>
        vv = new Vue({
            el:"#app",
            data:{
                value:true,
                errorMassage:"",
                company:"唐琳大公司",
                user:{
                    name:"唐琳",
                    age:"18",
                    gender:"女",
                    roles:[1,2],
                    city:"成都"
                },
                roles:[
                {id:1,name:"admin"},
                {id:2,name:"manager"},
                {id:3,name:"staff"},
                ],            
                genders:["男","女"],
                cities:[
                    {id:1,name:"成都"},
                    {id:2,name:"武汉"},
                    {id:3,name:"重庆"},
                    {id:4,name:"长沙"}
                ]
            },
            methods:{
                test1:function(){
                    console.log("我叫唐琳");
                    console.log("我是傻逼");
                },
                test2:function(event){
                    console.log(event.currentTarget.selectedOptions[0].attributes.getNamedItem("sequence").value);
                },
            },
            watch:{
                // 监听器
                'user.name'(newValue,oldValue){
                    this.errorMassage = this.user.name.length > 6 ? "名字太长!":""
                }
            },
            computed: {
                // 计算器
                capitalize:function(){
                    return this.user.name.toUpperCase;
                }
            },
            filters:{
                // 局部过滤器
                if(value){
                    return value.replace("a","*");
                }
            },
            // vue实例初始化成功
            created (){
                window.test1 = this.test1;
            },
            // vue 实例加载完成，并且和页面元素绑定成功
            mounted (){
                this.test1();
            }
        })
        
        $(function (params) {
            test1();
        })
    </script>